<template>
  <div class="swiper">
    <swiper :options="swiperOption">
      <swiper-slide v-for="item of swiperList" :key="item.id">
        <img :src="item.imgUrl" alt="banner">
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>
<script type="text/ecmascript-6">
    export default {
      props:['swiperList'],
      data(){
        return{
          swiperOption:{
            pagination: {
              el: '.swiper-pagination'
            },
            loop:true,
            autoplay: {
              delay: 3000,
              stopOnLastSlide: false,
              disableOnInteraction: false
            }
          },

        }
      }
    }
</script>
<style lang="stylus" rel="text/stylus" scoped>
  /*@import "../../../assets/css/common.styl"*/
  /*@import "~@/assets/css/common.styl"*/
  @import "~css/common.styl"

  .swiper
    height: 0
    background-color: #ccc
    padding-bottom: 26.666%
    img
      width: 100%
      height: 100%
    >>> .swiper-pagination-bullet
      width: 6px
      height: 6px
      background-color: #fff
      opacity: 0.2
    >>> .swiper-pagination-bullet-active /* 样式穿透 */
      opacity: 1
      background: #e4e7ea
</style>
